<template>
  <div class="invoice">
    <header>
      <img @click="fan()" src="login/1.png" alt="" />
      <h2>意见反馈</h2>
    </header>
    <div class="main">
      <p>问题描述</p>
      <input
        class="inp-one"
        v-model="inpvala"
        placeholder="请填写问题描述以便我们提供更好的帮助"
        type="texparea"
      />
      <p>上传图片</p>
      <van-uploader v-model="fileList" multiple />
      <button class="tijiao" :disabled="bool" @click="submit()">提交</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Uploader } from 'vant';
import { Dialog } from 'vant';

Vue.use(Uploader);
export default {
  data() {
    return {
      inpvala: "",
      bool: true,
      fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true },
      ],
    }
  },
  created() {},
  watch: {
    inpvala(val) {
      if (val != "") {
        this.bool = false
      }else{
          this.bool = true
      }
    },
    fileList(){
        if(this.fileList.length>2){
            this.fileList.length =2
        }

    }
  },
  methods: {
    fan() {
      this.$router.go(-1);
    },
    submit() {
      console.log(1);
      Dialog.alert({
         message: '请求成功',
         theme: 'round-button',
    }).then(() => {
    // on close
    });
    this.fileList = []
      this.inpvala = ""
    },
  },
};
</script>

<style>
html,
body {
  height: 100%;
}
#app {
  height: 100%;
}
</style>
<style scoped>
.invoice {
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding-right: 0.2rem; */
  position: relative;
}
h2 {
  font-size: 0.17rem;
}
header > p {
  position: absolute;
  right: 0.2rem;
}
header > img {
  position: absolute;
  left: 0;
  width: 0.4rem;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.15rem;
  position: relative;
}
.inp-one {
  height: 1.8rem;
  background-color: #fcfcfc;
  border: none;
  text-indent: 0.1rem;
}
.inp-two {
  height: 1rem;
  background-color: #fcfcfc;
  border: none;
  text-indent: 0.1rem;
  display: block;
  position: relative;
}
/* .inp-two::before{
    content: "[+]";
    width: 0.3rem;
    height: 0.3rem;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
} */
.main > p {
  line-height: 0.3rem;
  /* text-indent: 0.2rem; */
}
.tijiao{
    outline: none;
    border: none;
    background-color: slategray;
    position: absolute;
    bottom: 0rem;
    height: 0.4rem;
    width: 100%;
    left: 0;
    font-size: 0.15rem;
    border-radius: 0.3rem;
}
</style>